<template>
  <div class="financeWrap">
    <div class="financeInner" :style="{transform: zoom, left: left}">
      <Top></Top>
      <div class="body">
        <!-- 左边内容 -->
        <div class="left">
          <Left1></Left1>
          <Left2></Left2>
        </div>

        <!-- 中间部分 -->
        <div class="center">
          <div class="center0">
            <div class="fl center0-1">办公状况</div>
            <div class="fl center0-2">
              <div style="height:40px;width:30px;line-height: 40px;">
                <img src="@/assets/icons/icon_009.png" />
              </div>
              <div class="seamless-warp2">
                <vue-seamless-scroll :class-option="optionLeft" :data="newEmployee">
                  <ul class="item">
                    <li v-for="(item,index) in newEmployee" :key="index">欢迎{{item.name }}加入品新科技</li>
                  </ul>
                </vue-seamless-scroll>
              </div>
            </div>
          </div>
          <div class="center1">
            <div class="center1-cont">
              <p class="center1-p1">{{count3}}</p>
              <p class="center1-color">今日签到（人）</p>
            </div>
            <div class="center1-cont">
              <p class="center1-p2">{{count2}}</p>
              <p class="center1-color">今日审批单（份）</p>
            </div>
            <div class="center1-cont">
              <p class="center1-p3">{{count3}}</p>
              <p class="center1-color">昨日审批单（完成）</p>
            </div>
            <div class="center1-cont">
              <p class="center1-p4">{{count4}}</p>
              <p class="center1-color">未完成审批单（份）</p>
            </div>
          </div>
          <div class="center2">
            <div class="center2-cont1">
              <div class="center2-cont1-1">签到排名</div>
              <div class="center2-cont1-2">温馨提示：正常上班时间进行员工排名，加班员工时间另计</div>
            </div>
            <div class="center2-cont2">
              <div class="c-c-title">
                <ul>
                  <li>排名</li>
                  <li>姓名</li>
                  <li>部门</li>
                  <li>打卡时间</li>
                </ul>
              </div>
              <div class="c-c-cont">
                <vue-seamless-scroll :class-option="optionTop" :data="dataFile">
                  <ul v-for="(item, index) in dataFile" :key="index">
                    <li>{{index+1}}</li>
                    <li>{{item.user_name}}</li>
                    <li>{{item.deptname}}</li>
                    <li>{{item.min_checktime}}</li>
                  </ul>
                </vue-seamless-scroll>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧内容 -->
        <div class="right">
          <div class="right-1">
            <div class="right-1-top mt20">富润通科技</div>
            <div class="right-1-center">
              <img src="@/assets/icons/icon_017.png" alt />
            </div>
            <div
              class="right-1-cont"
            >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;富润通科技（深圳）有限公司（QL)是经深圳市工商局登记注册成立之企业；成立于二零一四年十二月, 注册资金为1000万人民币。公司位于深圳市龙华清湖富安娜工业园内。可进行独立的货物进出口报关申报，配有专业的运输车队，可为客户提供更方便，快捷，安全的珠三角配送业务。公司创办以来坚持以人为本,注重人员队伍的引进、技术培训 与管理。拥有4800平方米的生产和办公场地，员工人数300人左右。</div>
          </div>
          <div class="right-1">
            <div class="right-1-top">品新科技</div>
            <div class="right-1-center">
              <img src="@/assets/icons/icon_016.png" alt />
            </div>
            <div class="right-1-cont">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;品新集团是一家从设计、制造、供应链到商业运营的综合性服务企业，始终致力于一站式服务解决方案，包括供应链服务、研发、智能制造、贸易、金融服务，以及消费电子平台、综合制造平台等服务平台。良好的一体化运营为我们的客户提供高效、优质的供应链服务，包括采购配送、供应链金融、集成智能制造、物流运输、供应链管理解决方案等。
              公司始终坚持“追求卓越、精益求精、精益求精”的核心价值观和“始终关注客户需求”的服务理念，力争成为智能制造领域的领跑者。
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Top from '@/views/home/BoardPage/OfficeBoard/Top'
import Left1 from '@/views/home/BoardPage/OfficeBoard/Left1'
import Left2 from '@/views/home/BoardPage/OfficeBoard/Left2'
import serve from '@/api/financeBoard'
import cookies from '@/utils/cookies'
import vueSeamlessScroll from 'vue-seamless-scroll'
import { putAction, deleteAction, getAction, dele, postAction, postForm } from '@/api/manage'
// import request from '@/utils/request'

export default {
  components: { Top, Left1, Left2, vueSeamlessScroll },
  data() {
    return {
      currentNav: '',
      data2: ['人工费用', '资金成本', '变动费用', '经营费用', '固定费用'],
      dataList1: [],
      dataList2: [],
      zoom: 'scale(1)',
      left: 0,
      count1: '',
      count2: '',
      count3: '',
      count4: '',
      dataFile: [],
      officeFiles: [],
      newEmployee: [],
    }
  },

  async created() {
    let params = { dataTime: this.util.timeFormat3B(new Date().toLocaleDateString()) }
    await this.login()
    await this.office()
    await this.getNewEmployee()
    this.signIn()
  },
  mounted() {
    this.fullScreenDom = document.querySelector('.fullScreenBox')
    console.log(this.fullScreenDom.offsetHeight, window.screen.height)
    this.changeProp()
    window.onresizeArr.push(this.changeProp)
  },
  methods: {
    login() {
      return new Promise((result, reject) => {
        serve
          .login({ account: 'admin', password: '123456' })
          .then((data) => {
            cookies.setCookie('token', data.token)
            result()
          })
          .catch(() => {
            reject()
          })
      })
    },

    //签到排名
    signIn() {
      let self = this
      getAction(
        'http://192.168.11.154:9101/attendancetop',
        Object.assign({
          token: '298923c8190045e91288b430794814c4&type=0&top=20',
          type: '0',
          top: '20',
        })
      ).then((res) => {
        console.log(res)
        if (res.code == 0) {
          self.dataFile = res.data
        } else {
          self.$message.warning(res.msg)
        }
      })
      // return new Promise((result, reject) => {
      //   serve
      //     .signIn({
      //       token: '298923c8190045e91288b430794814c4&type=0&top=20',
      //       type: '0',
      //       top: '20',
      //     })
      //     .then((res) => {
      //       console.log(res)
      //       if (res.code == 0) {
      //         self.dataFile = res.data
      //       } else {
      //         self.$message.warning(res.msg)
      //       }
      //     })
      //     .catch(() => {
      //       reject()
      //     })
      // })
    },

    changeProp() {
      console.log(this.fullScreenDom.offsetHeight, window.screen.height, window.innerWidth)
      let timeOut = setTimeout(() => {
        clearTimeout(timeOut)
        let height = document.querySelector('.financeWrap').offsetHeight
        let width = document.querySelector('.financeWrap').offsetWidth
        // console.log(height, width)
        let prop = height / 1080
        this.zoom = 'scale(' + prop + ')'
        if (this.fullScreenDom.offsetHeight === window.screen.height) {
          if (prop === 1) {
            this.left = 0
            return
          }
          let innerWidth = (window.innerWidth - document.querySelector('.financeInner').offsetWidth * prop) / 2
          // console.log(window.innerWidth, document.querySelector('.financeInner').offsetWidth * prop)
          this.left = innerWidth + 'px'
        } else {
          this.left = (width - 1832 * prop) / 2 + 'px'
        }
      }, 100)
    },

    //办公状况
    office() {
      let self = this
      //获取当天新发起单据
      getAction(
        'http://192.168.11.154:9101/bpmscount',
        Object.assign({
          token: '298923c8190045e91288b430794814c4',
        })
      ).then((res) => {
        console.log(res.count)
        if (res.rtn == 0) {
          self.count1 = res.count
        } else {
          self.$message.warning(res.msg)
        }
      })

      //获取当天审批完成单据
      getAction(
        'http://192.168.11.154:9101/bpmsfinishcount',
        Object.assign({
          token: '298923c8190045e91288b430794814c4',
        })
      ).then((res) => {
        console.log(res.count)
        if (res.rtn == 0) {
          self.count2 = res.count
        } else {
          self.$message.warning(res.msg)
        }
      })

      //今日签到人数
      getAction(
        'http://192.168.11.154:9101/attendance',
        Object.assign({
          token: '298923c8190045e91288b430794814c4',
        })
      ).then((res) => {
        if (res.rtn == 0) {
          console.log(res.count + '11111')
          self.count3 = res.count
        } else {
          self.$message.warning(res.msg)
        }
      })

      //获取当天签到人数（按类别   0为白班，1为夜班）
      getAction(
        'http://192.168.11.154:9101/attendancebytype',
        Object.assign({
          token: '298923c8190045e91288b430794814c4',
          type: '0',
        })
      ).then((res) => {
        console.log(res.count)
        if (res.rtn == 0) {
          self.count4 = res.count
        } else {
          self.$message.warning(res.msg)
        }
      })
    },

    //获取新入职人员
    getNewEmployee() {
      let self = this
      getAction(
        'http://192.168.11.154:9101/newemployee',
        Object.assign({
          token: '298923c8190045e91288b430794814c4',
        })
      ).then((res) => {
        console.log(res.data)
        if (res.code == 0) {
          self.newEmployee = res.data
        } else {
          self.$message.warning(res.msg)
        }
      })
    },

    // login() {
    //   return new Promise((result, reject) => {
    //     serve
    //       .login({ account: 'admin', password: '123456' })
    //       .then((data) => {
    //         cookies.setCookie('token', data.token)
    //         result()
    //       })
    //       .catch(() => {
    //         reject()
    //       })
    //   })
    // },
  },
  computed: {
    optionLeft() {
      return {
        direction: 2,
        limitMoveNum: 2,
      }
    },
    optionTop() {
      return {
        step: 1, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      }
    },
  },
}
</script>

<style scoped lang='less'>
.financeWrap {
  overflow: hidden;
  font-size: 12px;
  background-color: #000051;
  height: 100%;
  width: 100%;
  .financeInner {
    position: relative;
    margin: 0 auto;
    width: 1832px;
    height: 1080px;
    transform-origin: 0 0;
  }
}

.body {
  height: calc(100% - 83px);
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  margin-top: 15px;
  .left {
    background-image: url(../../../../assets/chartBg/p_001.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    height: 961px;
    width: 456px;
  }

  .center {
    width: 800px;
    color: #fff;
    .center0 {
      height: 40px;
      width: 800px;
      .center0-1 {
        width: 65%;
        font-size: 24px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #e9f2f9;
      }
      .center0-2 {
        width: 35%;
        height: 40px;
        text-align: left;
        font-size: 16px;
        display: flex;
        img {
          width: 21px;
          height: 18px;
        }
        .span {
          display: inline-block;
          width: 250px;
          margin-left: 5px;
        }
      }
    }

    .center1 {
      background-image: url(../../../../assets/chartBg/p_003.png);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 100% 100%;
      height: 155px;
      width: 800px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .center1-cont {
        width: 25%;
        text-align: center;
        font-family: Source Han Sans CN;
        font-size: 20px;
        .center1-color {
          color: #fff;
          opacity: 0.5;
        }
      }
      .center1-p1 {
        color: #30ccfb;
        font-size: 40px;
        padding: 0;
        margin: 0;
      }
      .center1-p2 {
        color: #09c49a;
        font-size: 40px;
        padding: 0;
        margin: 0;
      }
      .center1-p3 {
        color: #ffa40c;
        font-size: 40px;
        padding: 0;
        margin: 0;
      }
      .center1-p4 {
        color: #f8660e;
        font-size: 40px;
        padding: 0;
        margin: 0;
      }
    }
    .center2 {
      background-image: url(../../../../assets/chartBg/p_002.png);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 100% 100%;
      height: 735px;
      width: 800px;
      margin-top: 30px;
      .center2-cont1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: Source Han Sans CN;
        font-size: 20px;
        height: 90px;
        .center2-cont1-1 {
          width: 40%;
          text-align: center;
          font-size: 24px;
        }
        .center2-cont1-2 {
          width: 60%;
          font-size: 14px;
          color: #ffa40c;
          text-align: center;
          font-family: Source Han Sans CN;
        }
      }
      .center2-cont2 {
        height: 645px;
        width: 800px;
        .c-c-title {
          height: 35px;
          line-height: 33px;
          background-color: #032b79;
          color: #fff;
          ul li {
            float: left;
            text-align: center;
            width: 24%;
            font-size: 16px;
          }
        }
        .c-c-cont {
          overflow: hidden;
          ul li {
            float: left;
            height: 35px;
            line-height: 30px;
            text-align: center;
            width: 24%;
            font-size: 16px;
            color: #69b8fa;
            opacity: 0.8;
            border-bottom: 1px solid #009ef0;
          }
        }
      }
    }
  }

  .right {
    background-image: url(../../../../assets/chartBg/p_004.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    height: 961px;
    width: 456px;
    color: #fff;
    .right-1 {
      width: 456px;
      text-align: center;
      font-size: 24px;
      font-family: Source Han Sans CN;
      .right-1-top {
        height: 41px;
        line-height: 41px;
      }
      .right-1-center {
        width: 456px;
        margin-top: 5px;
        text-align: center;
        height: 232px;
        img {
          width: 420px;
          // height: 232px;
          background-color: black;
        }
      }
      .right-1-cont {
        //换行省略号
        margin: 16px 18px 0 18px;
        text-align: center;
        width: 420px;
        height: 160px;
        font-size: 15px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
        opacity: 0.5;
        overflow: auto;
        // text-overflow: ellipsis;
        // display: -moz-box;
        // -moz-line-clamp: 7 !important;
        // -moz-box-orient: vertical;
        // display: -webkit-box;
        // -webkit-line-clamp: 7;
        // -webkit-box-orient: vertical;
        span {
          margin-left: 10px;
        }
      }
    }
    .mt20 {
      margin-top: 21px;
    }
    p {
      margin: 0;
      padding: 0;
    }
  }
}

.seamless-warp2 {
  overflow: hidden;
  height: 40px;
  line-height: 40px;
  width: 640px;
  ul.item {
    width: 640px;
    li {
      float: left;
      width: 200px;
      padding: 0;
      margin: 0;
    }
  }
}
</style>
